<template>
  <el-container>
    <el-main>
      <div class="edit">
        <div class="editHead">
          <el-page-header @back="goBack" content="编辑管理员"> </el-page-header>
        </div>
        <div class="editform">
          <span @click="goapplication">角色管理</span>
          <el-form
            :model="form"
            ref="form"
            :rules="rules"
            label-width="80px"
            size="medium "
          >
            <el-form-item label="角色" size="medium">
              <el-select v-model="form.role_id" multiple>
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.display_name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="姓名" prop="name">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="form.email"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="form.password" type="password"></el-input>
            </el-form-item>
            <div class="changepwd">
              <el-alert title="不修改密码请勿填写" type="info" show-icon>
              </el-alert>
            </div>
            <div
              class="pwdtitle"
              v-show="form.password && form.password.length < 12"
            >
              密码至少包含大写字母，小写字母，数字，且不少于12位
            </div>
            <el-form-item label="禁止登录">
              <el-switch
                v-model="form.is_ban_login"
                @change="changeSwitch"
              ></el-switch>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-main>
    <div class="editbtn">
      <el-button type="primary" @click="onSubmit">保存</el-button>
      <el-button @click="goapplication">取消</el-button>
    </div>
  </el-container>
</template>

<script>
import {
  getAdministratorInfo,
  getRole,
  editAdministratorInfo,
} from "@/network/system";
import { Message } from "element-ui";

export default {
  data() {
    return {
      form: {
        is_ban_login: "",
        name: "",
        email: "",
        password: "",
        role_id: [],
        last_login_date: "",
        last_login_ip: "",
      },
      login: "",

      rules: {
        name: [{ required: true, message: "请输入你的姓名", trigger: "blur" }],
        email: [
          { required: true, message: "请输入你的邮箱地址", trigger: "blur" },
        ],
      },
      options: [],
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    goapplication() {
      this.$router.push("/system/administrator");
    },
    changeSwitch() {
      if (this.form.is_ban_login === false) {
        this.login = 0;
      } else {
        this.login = 1;
      }
    },
    async initUser() {
      const { data } = await getAdministratorInfo(this.$route.query.id);
      if (data) {
        this.form.last_login_date = data.last_login_date;
        this.form.last_login_ip = data.last_login_ip;
        this.login = data.is_ban_login;
        this.form.name = data.name;
        this.form.email = data.email;
        this.form.role_id = data.role_id;
        if (data.is_ban_login === 0) {
          this.form.is_ban_login = false;
        } else {
          this.form.is_ban_login = true;
        }
      }
    },
    async getRole() {
      const { data } = await getRole();
      this.options = data.roles;
    },
    async onSubmit() {
      const params = {
        email: this.form.email,
        id: this.$route.query.id,
        is_ban_login: this.login,
        last_login_date: this.form.last_login_date,
        last_login_ip: this.form.last_login_ip,
        name: this.form.name,
      };
      const { status, message } = await editAdministratorInfo(
        this.$route.query.id,
        params
      );
      if (status === 0) {
        this.$router.push("/system/administrator");
        Message.success("成功");
      } else {
        Message.error(message);
      }
    },
  },
  created() {
    this.initUser();
    this.getRole();
  },
};
</script>

<style lang="scss" scoped>
.el-container {
  height: 100%;
  text-align: left;
  box-sizing: border-box;
}
.el-main {
  background-color: #f1f2f9;
  overflow-x: hidden;
  .edit {
    width: 100%;
    background-color: white;
    border-radius: 8px;
    padding: 30px;
    .editHead {
      font-size: 14px;
      font-weight: 600;
      color: #333;
      ::v-deep .el-page-header__left {
        &:hover {
          color: #66b1ff;
        }
      }
    }
    .editform {
      width: 30%;
      margin-top: 30px;
      margin-left: 100px;
      position: relative;
      .el-select {
        width: 100%;
      }
      .el-alert {
        background-color: white;
        ::v-deep .el-icon-close:before {
          display: none;
        }
      }
      span {
        position: absolute;
        top: 5px;
        right: -70px;
        color: #66b1ff;
        display: inline-block;
        padding-bottom: 8px;
        &:hover {
          border-bottom: 1px solid #66b1ff;
          cursor: pointer;
        }
      }
      .changepwd {
        position: absolute;
        bottom: 57px;
        right: -185px;
      }
      .pwdtitle {
        font-size: 13px;
        color: #ff4d4f;
        margin-left: 10px;
        position: absolute;
        bottom: 65px;
        right: -500px;
      }
    }
  }
}
.editbtn {
  width: 100%;
  background-color: white;
  position: fixed;
  left: 200px;
  bottom: 0;
  padding: 20px;
  overflow: hidden;
  text-align: left;
}
</style>